<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">项目列表</x-header>
    <div class="content">
      <ul v-if="items.length">

        <li v-for="(x,i) of items" :key="i"   class="ub pad my-item" @click="handleItems(x)">
          <i class="fa fa-anchor ub uc"></i>
          <div class="title uf-1 ub-v">
            <div>{{x.project_name}}</div>
            <p class="">
                项目编号：{{x.project_number}}
            </p>
            <p class="">
                项目经理：{{x.pm_person_name}}
            </p>
            <p class="">
                开始时间：{{x.start_date|prettyDate}}
            </p>
          </div>
          <div class="value ub uc">{{x.value}}</div>
          <div class="ub uc t-gray">
            <i class="fa fa-chevron-right"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
export default {
  data() {
    return {
      storecomp_code: this.$route.params["storecomp_code"] || 2,
      state: this.$route.params["state"] || 2,
      year: this.$route.params["year"] || 2,
      items: []
    };
  },
  mounted() {
    this.$vux.loading.show({
      text: "loading"
    });
    this.$store
      .dispatch("project_erp_list", {
        storecomp_code: this.storecomp_code,
        state: this.state,
        year: this.year
      })
      .then(resp => {
        this.items = resp.data;
        this.$vux.loading.hide();
      });
  },
  methods: {
    handleItems(item) {
      this.$router.push({
        name: "ProjectDetail",
        params: {comp_id:item.comp_id, project_code: item.project_number}
      });
    }
  },
  components: {
    XHeader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  .sub-title {
    font-size: 0.8em;
  }
  i {
    margin-left: 10px;
  }
}
</style>